<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<div id="app">
			姓名:<input type="text" v-model="likeName" @keydown.enter="search()" /><button type="button" class="btn .btn-default"
			 @click="search()">搜索</button>
			 <button class="btn btn-primary" @click="location.href='addUser.html'">新增</button>
			<table class="table table-bordered">
				<caption>边框表格布局</caption>
				<thead>
					<tr>
						<th>账号</th>
						<th>姓名</th>
						<th>状态</th>
						<th>创建时间</th>
						<th>手机号</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in userList">
						<td>{{item.account}}</td>
						<td>{{item.name}}</td>
						<td>{{(item.state==1)?'正常':'已冻结'}}</td>
						<td>{{item.create_time |dateFormat}}</td>
						<td>{{item.phone}}</td>
						<td>{{sexName[item.sex]}}</td>
						<td>
							<button type="button" class="btn btn-primary" @click="updateUser(item)">修改</button>
							<button type="button" class="btn btn-danger" @click="del(item.user_id)">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
			<ul class="pagination pagination-lg">
				<li><a href="#" @click.stop="prev">&laquo;</a></li>
				<li v-for="(item,index) in navigate" @click.stop="changePage(item)"><a href="#">{{item}}</a></li>
				<li><a href="#" @click.stop="next">&raquo;</a></li>
			</ul>
		</div>
		<script type="text/javascript">
			Vue.filter("dateFormat", function(data) {
				return new Date(data).toLocaleString().replace(/:\d{1,2}$/, ' ')
			});
			let vm = new Vue({
				el: "#app",
				data: {
					userList: [],
					sexName: ["保密", "男", "女"],
					page: 1,
					pages: 0,
					navigate: [],
					likeName: null,
				},
				methods: {
					getData(page, maxSize, likeName) {
						let params = {
							page,
							maxSize,
							likeName
						}
						if (likeName != "" && likeName !== null) {
							//动态的给对象添加属性
							params['likeName']=likeName;
						}
						this.$http.get("http://chenxueli.site:8081/ssm/selectPageUserList", {
								params
							})
							.then((res) => {
								this.userList = res.body.data.list;
								this.page = res.body.data.pageNum;
								this.pages = res.body.data.pages;
								this.navigate = res.body.data.navigatepageNums;
							});
					},
					//上一页
					prev() {
						let likeName = this.likeName;
						let page = this.page;
						if (page > 1) {
							page--;
						}
						let maxSize = 10;
						this.getData(page, maxSize, likeName);
					},
					//下一页
					next() {
						let likeName = this.likeName;
						let page = this.page;
						if (page < this.pages) {
							page++;
						}
						let maxSize = 10;
						this.getData(page, maxSize, likeName);
					},
					//按钮的切换
					changePage(page) {
						let likeName = this.likeName;
						let maxSize = 10;
						this.getData(page, maxSize, likeName)
					},
					search() {
						let likeName = this.likeName;
						let maxSize = 10;
						let page = this.page;
						this.getData(page, maxSize, likeName)

					},
					//删除用户
					del(userId) {
						let params = {
							userId
						};
						this.$http.post("http://chenxueli.site:8081/ssm/deleteUser", params, {
								emulateJSON: true
							})
							.then((res) => {
								if (res.body.resultCode == 0) {
									console.log(res);
									alert(res.body.message);
									let page = this.page;
									let likeName = this.likeName;
									this.getData(page, 10, likeName);
								} else {
									alert(res.body.message);
								}
							});
					},
					updateUser(item){
						sessionStorage.setItem("flag",2);
						sessionStorage.setItem("account",item.account);
						sessionStorage.setItem("password",item.password);
						sessionStorage.setItem("name",item.name);
						sessionStorage.setItem("address",item.address);
						sessionStorage.setItem("phone",item.phone);
						sessionStorage.setItem("user_id",item.user_id);
						sessionStorage.setItem("version",item.version);
						sessionStorage.setItem("sex",item.sex);
						sessionStorage.setItem("memo",item.memo);
						location.href="addUser.html"
					}
				},
				mounted() {
					this.getData(1, 10, null);
				},

			});
		</script>
	</body>
</html>
